import { ISchema } from '@formily/react'

export const QRCodesSettersSchema = {
  contentValue: {
    title: 'QR码内容',
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'ExpressionDialogSetter',
    'x-component-props': {
      defaultValue: 'https://example.com',
      placeholder: '请输入要生成QR码的内容或表达式',
    },
  },
  size: {
    title: '尺寸',
    type: 'number',
    'x-decorator': 'FormItem',
    'x-component': 'NumberPicker',
    'x-component-props': {
      defaultValue: 128,
      min: 32,
      max: 512,
    },
  },
  level: {
    title: '错误纠正级别',
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'M',
      options: [
        { label: '低 (L)', value: 'L' },
        { label: '中 (M)', value: 'M' },
        { label: '高 (Q)', value: 'Q' },
        { label: '最高 (H)', value: 'H' },
      ],
    },
  },
  fgColor: {
    title: '前景色',
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'ColorPicker',
    'x-component-props': {
      defaultValue: '#000000',
    },
  },
  bgColor: {
    title: '背景色',
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'ColorPicker',
    'x-component-props': {
      defaultValue: '#FFFFFF',
    },
  },
  includeMargin: {
    title: '包含边距',
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultValue: true,
    },
  },
  marginSize: {
    title: '边距大小',
    type: 'number',
    'x-decorator': 'FormItem',
    'x-component': 'NumberPicker',
    'x-component-props': {
      defaultValue: 4,
      min: 0,
      max: 20,
    },
    'x-reactions': {
      dependencies: ['.includeMargin'],
      fulfill: {
        state: {
          visible: '{{$deps[0] === true}}',
        },
      },
    },
  },
  visible: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'ExpressionDialogSetter',
    title: '隐藏',
  },
}

export const QRCode: ISchema = {
  type: 'object',
  properties: QRCodesSettersSchema,
}
